<template>
  <div class="banner">
    <div v-show="bannerlist" class="slider" @touchstart="stopInterval" @touchend="startInterval">
      <div class="prev" @click="prev"></div>
      <div class="next" @click="next"></div>
      <transition-group tag="ul" :name="directClass">
        <li v-for="(img, i) in imgs" :key="img" v-show="index == i">
          <img :src="img" />
        </li>
      </transition-group>
      <ol>
        <li
          @click="changeDot(i)"
          :style="{
            backgroundColor:
              i - 1 == index ? '#8ac4d0' : 'rgba(244, 209, 96, 0.8)',
          }"
          v-for="i in imgs.length"
          :key="i"
        ></li>
      </ol>
    </div>
  </div>
</template>

<script>
export default {
  name: "Banner",
  props: {},
  data() {
    return {
      index: 0,
      bannerlist: null,
      imgs: [],
      directClass: "slider-left",
      intervalID: null,
      flag: true,
    };
  },
  created() {
    this.$http.get("/banner").then((d) => {
      this.bannerlist = d.data.banners;
      for (var i = 0; i < this.bannerlist.length; i++) {
        this.imgs.push(this.bannerlist[i].imageUrl);
      }
    });
  },
  methods: {
    changeClass(index) {
      if (index > this.index) {
        this.directClass = "slider-right";
      } else {
        this.directClass = "slider-left";
      }
    },
    changeDot(i) {
      let index = i - 1;
      this.changeClass(index);
      this.index = index;
    },
    prev() {
      let index = this.index - 1;
      this.changeClass(index);
      if (this.index <= 0) {
        this.index = this.imgs.length - 1;
      } else {
        this.index--;
      }
    },
    next() {
      let index = this.index + 1;
      this.changeClass(index);
      if (this.index >= this.imgs.length - 1) {
        this.index = 0;
      } else {
        this.index++;
      }
    },
    stopInterval() {
      window.clearInterval(this.intervalID);
    },
    startInterval() {
      this.intervalID = window.setInterval(() => {
        this.next();
      }, 3000);
    },
  },
  mounted() {
    this.startInterval();
  },
  beforeDestroy() {
    this.stopInterval();
  },
};
</script>
<style lang="less" scoped>
.banner {
  height: 37.5vw;
  overflow: hidden;
  .slider {
    position: relative;
    height: 37.5vw;
    ul {
      li {
        position: absolute;
        left: 0px;
        top: 0px;
        img {
          width: 100vw;
        }
      }
    }
    .prev,.next{
      position: absolute;
      height: 37.5vw;
      width: 30vw;
      top: 0px;
      z-index: 5;
    }
    .prev{
      left: 0px;
    }
    .next{
      right: 0px;
    }
    .slider-left-enter {
      transform: translateX(-100%);
    }
    .slider-left-enter-to,
    .slider-left-leave {
      transform: translateX(0%);
    }
    .slider-left-leave-to {
      transform: translateX(100%);
    }
    .slider-left-leave-active,
    .slider-left-enter-active {
      transition: all 0.5s linear;
    }

    .slider-right-enter {
      transform: translateX(100%);
    }
    .slider-right-enter-to,
    .slider-right-leave {
      transform: translateX(0%);
    }
    .slider-right-leave-to {
      transform: translateX(-100%);
    }
    .slider-right-leave-active,
    .slider-right-enter-active {
      transition: all 0.5s linear;
    }
    ol {
      position: absolute;
      left: 19vw;
      bottom: 8px;
      z-index: 2;
      li {
        float: left;
        width: 4vw;
        height: 3vw;
        margin-left: 2vw;
        border-radius: 50%;
        text-align: center;
        line-height: 20px;
        cursor: pointer;
      }
    }
  }
}
</style>